<template>
  <div class="home-container">
    <a-row type="flex" :gutter="10">
      <a-col :span="24">
        <a-card title="新人福利" style="margin-bottom: 10px">
          <a-card-grid
            style="width: 25%; text-align: center"
            :hoverable="false"
            v-for="item in state.order_data"
          >
            <div class="right">
              <div class="h2" style="color: #2d8cf0">
                {{ item.content }}
              </div>
              <div>{{ item.title }}</div>
            </div>
          </a-card-grid>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card title="订单统计" style="margin-bottom: 10px">
          <a-card-grid
            style="width: 50%; text-align: center"
            :hoverable="false"
            v-for="item in state.e_order_data"
          >
            <div class="right">
              <div class="h2" style="color: #2d8cf0">
                {{ item.content }}
              </div>
              <div>{{ item.title }}</div>
            </div>
          </a-card-grid>
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card title="售后订单" style="margin-bottom: 10px">
          <a-card-grid
            style="width: 25%; text-align: center"
            :hoverable="false"
            v-for="item in state.refund_data"
          >
            <div class="right">
              <div class="h2" style="color: #2d8cf0">
                {{ item.content }}
              </div>
              <div>{{ item.title }}</div>
            </div>
          </a-card-grid>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card title="用户信息" style="margin-bottom: 10px">
          <a-card-grid
            style="width: 50%; text-align: center"
            :hoverable="false"
            v-for="item in state.user"
          >
            <div class="right">
              <div class="h2" style="color: #2d8cf0">
                {{ item.content }}
              </div>
              <div>{{ item.title }}</div>
            </div>
          </a-card-grid>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card title="待处理事项" style="margin-bottom: 10px">
          <a-card-grid
            style="width: 16.666%; text-align: center"
            :hoverable="false"
            v-for="item in state.wait_data"
          >
            <div class="right">
              <div class="h2" style="color: #2d8cf0">
                {{ item.content }}
              </div>
              <div>{{ item.title }}</div>
            </div>
          </a-card-grid>
        </a-card>
      </a-col>
    </a-row>
    <a-row type="flex" :gutter="10">
      <a-col :span="12">
        <a-card title="统计数据">
          <div class="header flex justify-between items-center">
            <a-radio-group
              v-model:value="chart.echartType"
              @change="changeRadio"
            >
              <a-radio v-for="item in chart.statiStatus" :value="item.value">{{
                item.name
              }}</a-radio>
            </a-radio-group>
            <a-date-picker
              v-model:value="chart.date"
              picker="month"
              @change="changeTime"
            />
          </div>
          <div>
            <lineCharts :charData="chart.lineData" :type="chart.echartType" />
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="数据概况">
          <div class="flex header">
            <a-radio-group
              v-model:value="chart.countType"
              @change="changeCount"
            >
              <a-radio v-for="item in chart.countStatus" :value="item.value">{{
                item.name
              }}</a-radio>
            </a-radio-group>
          </div>
          <div>
            <barCharts :charData="chart.countData" :type="chart.countType" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import dayjs from "dayjs";
import { index, statistics, dataCount } from "@/api/home";
import lineCharts from "./echarts/lineCharts.vue";
import barCharts from "./echarts/barCharts.vue";
import { reactive } from "vue";

const state = reactive({
  e_order_data: [], // 兑换订单
  order_data: [], // 普通订单
  refund_data: [], // 售后订单
  user: [], // 用户信息
  wait_data: [], // 待处理事项
});
const chart = reactive({
  date: "",
  echartType: 1,
  statiStatus: [
    {
      name: "浏览量",
      value: 1,
    },
    {
      name: "支付金额",
      value: 2,
    },
    {
      name: "支付人数",
      value: 3,
    },
    {
      name: "支付订单数",
      value: 4,
    },
    {
      name: "注册用户",
      value: 5,
    },
  ],
  lineData: [],
  countType: 1,
  countData: [],
  countStatus: [
    {
      name: "今日",
      value: 1,
    },
    {
      name: "本周",
      value: 2,
    },
    {
      name: "本月",
      value: 3,
    },
    {
      name: "本季度",
      value: 4,
    },
    {
      name: "本年",
      value: 5,
    },
  ],
  count: ["昨日", "上周", "上月", "上季度", "去年"],
});

const getIndex = () => {
  index().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      Object.keys(data).forEach((key) => {
        state[key] = data[key];
      });
    }
  });
};
// 类型切换
const changeRadio = (val) => {
  chart.echartType = val.target.value;
  getStatistics();
};
const changeCount = (val) => {
  chart.countType = val.target.value;
  getDataCount();
};
// 获取统计的数据
const getStatistics = () => {
  statistics({
    type: chart.echartType,
    date: chart.date ? dayjs(chart.date).format("YYYY-MM") : "",
  }).then((res) => {
    if (res.code == 0) {
      const data = res.data;
      chart.lineData = data.list?.map((item) => {
        return {
          name: item.day,
          value: item.num,
        };
      });
    }
  });
};
const changeTime = () => {
  getStatistics();
};
// 获取数据概况:数据对比
const getDataCount = () => {
  dataCount({
    type: chart.countType,
  }).then((res) => {
    if (res.code == 0) {
      const data = res.data;
      const contentArray = data.count_data?.map((item) => ({
        name: chart.countStatus[chart.countType - 1].name,
        type: item.title,
        value: item.content,
      }));
      const lastContentArray = data.count_data?.map((item) => ({
        name: chart.count[chart.countType - 1],
        type: item.title,
        value: item.last_content,
      }));
      chart.countData = [...contentArray, ...lastContentArray];
    }
  });
};
getIndex();
getStatistics();
getDataCount();
</script>
<style scoped lang="scss">
@import "./index";
</style>
